import React, { Component } from 'react';
import CommonHeader from '../../common/jsx/common_header';
import { DatePicker, Button, Table, Pagination } from 'antd';
import moment from 'moment';
import style from './logger.module.css';
const { RangePicker } = DatePicker;
class Logger extends Component {
  constructor(props) {
    super(props);
  }

  state = {
    bread:[
      {name:'其他管理',url:'',p_bread:true},
      {name:'日志查询',url:'/home/logger'}
    ],
    title_name:'日志查询',
    columns:[],
    data:[],
    pagination:{
      showQuickJumper:true,
      showSizeChanger:true
    }
  }

  onChange=(dates, dateStrings)=>{
    console.log('From: ', dates[0], ', to: ', dates[1]);
    console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
  }

  componentDidMount() {
    const data = []
    for (let i = 0; i < 102; i++) {   //添加模拟数据
      data.push({
        id:i,
        key: i,
        name: `管理员${i}`,
        status:'正常',
        action:`修改#企业动态#下条目${i}`,
        ip:`171.34.213.${i}`,
        time: {
          text:this.changetime(1398250549123+i*1000),
          timestamp:1398250549123+i*1000
        },
      });
    }

    const columns = [
      {
        title:'用户',
        dataIndex:'name',
        width:'15%',
      },
      {
        title:'状态',
        dataIndex:'status',
        width:'15%',
      },
      {
        title:'操作',
        dataIndex:'action',
        width:'25%',
      },
      {
        title:'ip',
        dataIndex:'ip',
        width:'20%',
      },
      {
        title:'更新时间',
        dataIndex:'time',
        render:(time)=>(time.text),
        sorter:(a,b)=>(a.time.timestamp - b.time.timestamp),
        width:'25%',
      },
    ]

    this.setState({
      data,
      columns
    })
  }

  changetime=(ntime)=>{
    var time = new Date(ntime)
    return time.getFullYear()+'年'+time.getMonth()+'月'+time.getDate()+'日'+time.getHours()+'时'+time.getMinutes()+'分'+time.getSeconds()+'秒';
  }

  render() { 
    return (
      <div>
        <CommonHeader bread={this.state.bread} title_name={this.state.title_name} />
        <div className={style.logger}>
          <div className={style.logger_seach}>
            <span className={style.seach_title}>操作时间：</span>
            <div className={style.seach_content}>
              <RangePicker
                ranges={{
                  '今天': [moment(), moment()],
                  '这个月': [moment().startOf('month'), moment().endOf('month')],
                }}
                onChange={this.onChange}
              />
            </div>
            <Button className={style.goseach} type="primary">搜索</Button>
          </div>
          <div className={style.table}>
            <Table pagination={this.state.pagination} columns={this.state.columns} dataSource={this.state.data} />
          </div>
        </div>
      </div>
    );
  }
}
 
export default Logger;